@import "color";

$width:135px;
$left:-156px;

.main-body {

  position: relative;

  .bs-sidebar {
    position: absolute;
    left: $left;
    width: $width;

    .bs-docs-sidebar.affix {
      width: $width;
      position: fixed;
      top: 70px;
    }

    .bs-docs-sidebar {

      .bs-docs-sidenav {
        margin-bottom: 20px;

        li {
          width: $width;
          margin-bottom: 9px;
          list-style: none;

          a {
            color: white;
            background-color: $mainColor;
            border-left: none;
            text-align: right;
            height: 30px;
            position: relative;
            display: block;
            padding: 4px 15px;
            font-size: 15px;
            font-weight: 500;
            width: $width;
            transition: width 1s;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: rgb(136, 136, 136) 2px 3px 4px;
            padding-right: 15px;

            &:hover, &:focus {
              padding-left: 15px;
              text-decoration: none;
              font-weight: bold;
              background-color: $hoverColor;
              color: white;
              text-decoration: unset;
              width: $width +15px;
            }

            &:hover::before {
              border: 15px solid $hoverColor;
              border-left-color: $backColor;
            }

            &::before {
              position: absolute;
              content: '';
              border: 15px solid $mainColor;
              border-left-color: $backColor;
              left: -5px;
              top: 0;
            }


          }
        }

        .active {
          a {
            padding-left: 15px;
            font-weight: bold;
            background-color: $hoverColor;
            color: white;

            &::before {
              border: 15px solid $hoverColor;
              border-left-color: $backColor;
            }


          }
        }
      }
    }
  }

}

